<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      data: {
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
    },
    watch:{
        data:{
            handler(val){
                setTimeout(()=>{
                    this.initChart()
                },0)

            },
            // deep:true,
            immediate:true
        }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
          let colors = ['#37A2DA', '#32C5E9','#67E0E3','#9FE6B8', '#FFDB5C',
              '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3',
          '#9d96f5', '#8378EA', '#96BFFF']
          let sersData = this.data.lengData.map((item,index) => {
              return {
                  name: item,
                  type: 'line',
                  symbolSize: 5,
                  symbol: 'circle',
                  itemStyle: {
                      normal: {
                          color: colors[index],
                      }
                  },
                  data: this.data.yData1['y'+(index+1)]
              }
          })
        // let sersData = [{
        //     name: this.data.lengData[0],
        //     type: 'line',
        //     symbolSize: 5,
        //     symbol: 'circle',
        //     itemStyle: {
        //       normal: {
        //         // color: '#4BC0C0',
        //       }
        //     },
        //     data: this.data.yData1
        //   }]
        //   if(this.data.lengData.length>1){
        //     sersData.push({
        //       name: this.data.lengData[1],
        //       type: 'line',
        //       symbolSize: 5,
        //       symbol: 'circle',
        //       itemStyle: {
        //         normal: {
        //           // color: '#36A2EB',
        //         }
        //       },
        //       data: this.data.yData2
        //     })
        //   }
          let startLine = 0
          if(sersData[0].data.length<=16){
              startLine = 0
          }else if(sersData[0].data.length > 16 && sersData[0].data.length <= 32){
              startLine = 50
          }else if(sersData[0].data.length > 32 && sersData[0].data.length <= 48){
              startLine = 60
          }else if(sersData[0].data.length > 48 && sersData[0].data.length <= 64){
              startLine = 70
          }else if(sersData[0].data.length > 64 && sersData[0].data.length <= 80){
              startLine = 80
          }else if(sersData[0].data.length > 80 && sersData[0].data.length <= 96){
              startLine = 90
          }else if(sersData[0].data.length > 96){
              startLine = 95
          }
        this.chart.setOption({
          backgroundColor: '#fff',
          title: {
            text: this.data.title,
            left: 'center',
            textStyle: {
              fontSize: '14'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          grid: {
            left: '15%',
            right: '5%',
            top:'15%',
            bottom:'31%',
            borderWidth: 0,
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            left: 'center',
            top:20,
            textStyle: {
              color: '#90979c'
            },
            data: this.data.lengData
          },
          calculable: true,
          dataZoom:[{
              end: 100,
              show: false,
              start: startLine,
              type: "inside",
          }],
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: true
            },
            axisLabel: {
              interval: 0,
                rotate:45,
            },
            data: this.data.xData
          }],
          yAxis: [{
            type: 'value',
            name:this.data.unit,
            nameLocation:'center',
            nameTextStyle:{
              padding:[0,0,15,0]
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              interval: 0
            }
          }],
          series: sersData
        })
      }
    }
  }
</script>
